<template>
  <editor-layout class="upload-panel" @ok="handleOk" v-on="$listeners" v-loading="loading" :loading="saveLoading">
    <div style="text-align: center;">
      <div class="tip" style="margin: 10px 0;">
        tip：可上传单个图片，也可上传压缩包，压缩包为.zip格式
      </div>
      <el-upload
        class="upload-demo"
        ref="upload"
        drag
        action=""
        accept=".zip,image/*"
        :on-change="handleFjChange"
        :before-upload="handleFjBeforeUpload"
        :show-file-list="false"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </div>
  </editor-layout>
</template>

<script>
import dao from '@/components/common/file/uploadAction'

export default {
  name: 'upload-panel',
  props: {
  },
  data() {
    return {
      loading: false,
      saveLoading: false,
      model: {
        username: ''
      },
      rule: {}
    }
  },
  methods: {
    async init() {

    },
    handleFjBeforeUpload() {
      return false
    },
    handleFjChange(file) {

      const params = {
        fileName: file.name,
        file: file.raw,
        fileType: file.raw.type,
        xtlx: 'product-image'
      }
      this.upload(params)
    },
    upload(params) {

      this.loading = true
      dao.upload(params, '/nfy/product/uploadFile').then(res => {
        this.loading = false
        if(res) {
          this.$notify.warning(res)
        } else {
          this.$notify.success('导入图片成功!')
        }
      }).catch(e => {
        this.loading = false
        this.$notify.warning('上传失败!')
        console.error(e)
      })

    },
    handleOk() {

    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.upload-panel {
}
</style>
